<template>
	<div class="orgAppMenu">
		<!-- 左侧列表数据 -->
		<div class="orgAppMenu-left">
			<h4>机构列表</h4>
			<div class="searchBar">
				<el-input
					v-model="orgSearch"
					placeholder="请输入机构"
					size="mini"
					clearable
					style="width: 60%"
				>
					<el-button
						slot="append"
						icon="el-icon-search"
						@click="orgSearchFun"
					></el-button>
				</el-input>
			</div>
			<div class="type-list" style="overflow-y: auto">
				<el-scrollbar ref="scrollContainer" class="scroll-container">
					<shyt-table
						ref="menuTableLeft"
						v-loading="leftLoginng"
						:columns="orgColumns"
						:data="orgTableData"
						:auto-resize="true"
						:keep-source="true"
						:tree-config="treeConfig"
						:edit-config="{
							trigger: 'dblclick',
							mode: 'row',
							showStatus: true,
						}"
						highlight-hover-row
						highlight-current-row
						@cell-click="roleClick"
					>
					</shyt-table>
				</el-scrollbar>
			</div>
		</div>
		<!-- 右侧数据 -->
		<div class="orgAppMenu-right">
			<h4>菜单列表</h4>
			<div class="searchBar">
				<el-row>
					<el-col
						><el-input
							v-model="menuSearch"
							placeholder="请输入菜单名称"
							size="mini"
							clearable
							style="width: 100%"
						>
							<el-button
								slot="append"
								icon="el-icon-search"
								@click="menuSearchFun"
							></el-button></el-input
					></el-col>
				</el-row>
				<el-button
					type="primary"
					:disabled="getMenuList.length == 0 ? true : false"
					@click="saveMenuList"
					>保存</el-button
				>
			</div>
			<div class="type-list" style="overflow-y: auto">
				<el-scrollbar ref="scrollContainer" class="scroll-container">
					<shyt-table
						ref="menuTableRight"
						v-loading="rightLoginng"
						resizable
						row-id="id"
						:data="menuTableData"
						:columns="menuColumns"
						:tree-config="{ children: 'children' }"
						:checkbox-config="{
							checkRowKeys: checkRowKeys,
							expandAll: true,
							showHeader: false,
						}"
						@checkbox-change="selectChangeEvent"
					>
					</shyt-table>
				</el-scrollbar>
			</div>
		</div>
	</div>
</template>

<script>
import { getOrgHospitalList } from '@/http/org.js'
import {
	getAllAppMenuList,
	orgAppMenuSave,
	getOrgAppMenuList,
} from '@/http/appMenu.js'
export default {
	name: 'OrgAppMenu',
	data() {
		return {
			menuTableLeft: null,
			menuTableRight: null,
			// 机构列表数据
			leftLoginng: false,
			orgSearch: null,
			orgTableData: [],
			//角色列表
			orgColumns: [
				{
					field: 'orgName',
					title: '机构列表',
					treeNode: true,
				},
			],
			treeConfig: {
				children: 'children',
				expandAll: true,
			},
			// 菜单列表数据
			orgId: null,
			getMenuList: [],
			checkRowKeys: [],
			rightLoginng: false,
			menuSearch: null,
			menuTableData: [],
			//菜单列表
			menuColumns: [
				{
					type: 'checkbox',
					width: '50',
				},
				{
					field: 'menuName',
					title: '菜单名称',
					treeNode: true,
				},
			],
		}
	},
	created() {},
	mounted() {
		this.orgSearchFun()
		this.menuTableLeft = this.$refs.menuTableLeft.$refs.xTable
		this.menuTableRight = this.$refs.menuTableRight.$refs.xTable
	},
	methods: {
		// 初始化变量
		onLoadVariable() {
			this.orgId = null
			this.getMenuList = []
			this.checkRowKeys = []
			this.menuSearch = null
			this.menuTableData = []
		},
		// 机构列表搜索
		orgSearchFun() {
			let orgParam = {
				officeType: '1',
				orgNameOrInputCode:
					this.orgSearch != null
						? this.orgSearch.toUpperCase()
						: this.orgSearch,
			}
			this.leftLoginng = true
			getOrgHospitalList(orgParam).then(({ data }) => {
				this.leftLoginng = false
				if (data.head.code == 200) {
					this.orgTableData = data.data
					this.$nextTick(() => {
						this.menuTableLeft.setAllTreeExpand(true)
					})
					// 初始化变量
					this.onLoadVariable()
				}
			})
		},
		roleClick({ row }) {
			this.orgId = row.id
			this.menuSearchFun()
		},
		//根据机构查询已选中菜单
		selectCheckRows() {
			let param = {
				orgId: this.orgId,
			}
			getOrgAppMenuList(param).then(({ data }) => {
				if (data.head.code == 200) {
					this.getMenuList = data.data
					this.checkRowKeys = data.data.map(i => (i.id == undefined ? i : i.id))
					this.menuTableRight.reloadData(this.menuTableData)
					this.$nextTick(() => {
						this.menuTableRight.setAllTreeExpand(true)
					})
				}
			})
		},
		checkRowFun(list) {
			list.forEach(menu => {
				let obj = this.checkRowKeys.find(id => id == menu.id)
				if (obj) {
					this.menuTableRight.toggleCheckboxRow(menu)
					if (menu.children && menu.children.length > 0) {
						this.checkRowFun(menu.children)
					}
				}
			})
		},
		saveMenuList() {
			let ids = []
			if (this.getMenuList && this.getMenuList.length > 0) {
				this.getMenuList.forEach(e => {
					ids.push(e.id)
				})
			}
			let orgMenuParam = {
				orgId: this.orgId,
				menuIds: ids,
			}
			this.rightLoginng = true
			orgAppMenuSave(orgMenuParam).then(({ data }) => {
				this.rightLoginng = false
				if (data.head.code == 200) {
					this.$message({
						message: '保存成功',
						type: 'success',
					})
				}
			})
		},
		// 获取菜单列表多选选中的
		selectChangeEvent({ records }) {
			this.getMenuList = records
		},
		// 菜单列表搜索
		menuSearchFun() {
			let menuParam = {
				menuType: '1',
				menuNameOrInputCode:
					this.menuSearch != null
						? this.menuSearch.toUpperCase()
						: this.menuSearch,
			}
			this.rightLoginng = true
			getAllAppMenuList(menuParam).then(({ data }) => {
				this.rightLoginng = false
				if (data.head.code == 200) {
					this.menuTableData = data.data
					this.$nextTick(() => {
						this.menuTableRight.setAllTreeExpand(true)
					})
					this.selectCheckRows()
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.orgAppMenu {
	height: 100%;
	display: flex;
	// 左侧
	.orgAppMenu-left {
		border-right: 1px solid #ccc;
		padding: 10px;
		box-sizing: border-box;

		width: 45%;
		h4 {
			padding: 0px;
			margin: 0 0 10px 0;
		}
		.searchBar {
			display: flex;
			justify-content: space-between;
		}
		.type-list {
			height: calc(100% - 22px - 28px);
			padding-top: 20px;
			box-sizing: border-box;
			.item-active {
				background: #ecf5ff;
			}
			.type-list-item {
				height: 40px;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #e4e7ed;
				box-sizing: border-box;
				transition: all 0.3s;
				&:first-child {
					border-top: 1px solid #e4e7ed;
				}
				&:hover {
					background: #e4e7ed;
				}
			}
			.type-list-none {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				font-weight: 500;
				color: #909399;
			}
		}
	}
	// 右侧
	.orgAppMenu-right {
		border-left: 1px solid #ccc;
		padding: 10px;
		box-sizing: border-box;

		width: 55%;
		h4 {
			padding: 0px;
			margin: 0 0 10px 0;
		}
		.searchBar {
			display: flex;
			justify-content: space-between;
		}
		.type-list {
			height: calc(100% - 22px - 28px);
			padding-top: 20px;
			box-sizing: border-box;
			.item-active {
				background: #ecf5ff;
			}
			.type-list-item {
				height: 40px;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #e4e7ed;
				box-sizing: border-box;
				transition: all 0.3s;
				&:first-child {
					border-top: 1px solid #e4e7ed;
				}
				&:hover {
					background: #e4e7ed;
				}
			}
			.type-list-none {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				font-weight: 500;
				color: #909399;
			}
		}
	}
}
::-webkit-scrollbar {
	display: none;
}
</style>
